<template>
	<view>
		<view class="comment u-border-bottom">
			<view class="left" @click="toHomePage(res.user.userId)">
				<image :src="res.user != null?res.user.imgUrl:'../../static/img/avatar.png'" mode="aspectFill"></image>
			</view>
			<view class="right">
				<view class="top">
					<view class="name" @click="toHomePage(res.user.userId)">{{ res.userName }}</view>
					<view class="like" :class="{ highlight: res.isLike }">
					</view>
				</view>
				<view class="content">{{ res.article }}</view>
				<view class="tupian u-m-b-20 u-m-t-20">
					<image mode="aspectFill" @click="previewImage(item.image)" v-for="(item, index) in res.list" :src="item.image" :key="index"></image>
					
				</view>
				<view class="u-flex u-row-between">
					<view class="bottom">
						{{ res.createTime }} <text @click="delComment(res.id)" class="u-m-l-20" v-if="res.userId == my.id">删除</text>
					</view>
					<view class="zanpinglun u-flex u-row-center" v-show="showDP">
						<u-icon label="取消" v-if="res.isDz == true" name="heart-fill" :size="35" color="#FF3F71" label-color="#FF3F71" class="u-m-r-20"
						 @click="getLike(res.id)"></u-icon>
						<u-icon label="赞" v-else name="heart" :size="35" color="#ffffff" label-color="#fff" class="u-m-r-20"
						 @click="getLike(res.id)"></u-icon>
			
			
						<u-icon label="评论" size="35" name="chat" color="#ffffff" label-color="#fff" @click="showComment(res)"></u-icon>
					</view>
			
					<view class="pinglun"  @click="open">
						<image src="../../static/img/workping.png"></image>
					</view>
				</view>
				<view class="reply-box u-m-t-30">
					<view v-if="res.dzList != ''" class="u-flex u-row-start">						
					<view class="username u-p-10 u-m-l-20"><u-icon label="" size="35" name="heart" label-color="#fff" class="u-m-r-10"></u-icon><text v-for="(r,i) in res.dzList" :key="i" @click="toHomePage(r.userId)">{{ r.userName }}</text></view>
					</view>
			
					<view @click="replyComment(res,item)" class="item u-flex u-row-start u-p-10" v-for="(item, index) in res.plList" :key="index">
							<view class="username u-m-l-10 u-m-r-10" style="color: #6268F1;"><text @click="toHomePage(item.buserId)">{{item.buserInfo?item.buserName:''}}</text><text style="color: #0D1D36;" v-if="item.buserInfo">回复</text><text @click="toHomePage(item.userId)">{{ item.userName }}</text>: </view>
						<view class="text">{{ item.comments }}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="foot u-border-top" :class="inputShow?'':'none'" :style="[{bottom:InputBottom+'px'}]">
			<view class="cu-avatar round u-flex u-col-center"><u-icon name="edit-pen" size="35"></u-icon></view>
			<input :placeholder="inputPlaceholder" class="padding-lr-sm bg-black " :adjust-position="false" maxlength="300"
			 cursor-spacing="10" confirm-type="send" v-model="inputText" @confirm="sendMsg()" :focus="inputShow" @focus="InputFocus"
			 @blur="InputBlur"></input>
			<button class="cu-btn bg-black shadow" @tap="sendMsg()">发送</button>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				replay:'',
				comment:{},
				openIndex:0,
				currentTab: 0,
				navScrollLeft: 0,
				inputShow:false,
				showDP:false,
				InputBottom: 0,
				inputText: '',
				inputPlaceholder: '写下你评论吧',
				userInfo: this.$store.state.userInfo,
				baseUrl:this.$mConfig.baseUrl,
				res: {},
				plBody:{},
				previewImages:[]
			};
		},
		onLoad(options) {
			if(options){
				let id= options.id;
				this.id= id;
				this.getComment(id);
			}
			this.my = this.$store.state.userInfo;
		},
		methods: {	
			delComment(id){
				var that = this;
				uni.showModal({
					content:"删除该工作圈？",
					confirmText:"删除",
					success: (res) => {  
					if(res.confirm) {  
						that.deleteWorkCircle(id);									
					}  
				}  
				})
				
			},
			async deleteWorkCircle(id){
				let result = await this.$apis.deleteWorkCircle({id:id});	
				uni.navigateBack({
					delta:2
				})
			},
			toHomePage(id){
				uni.navigateTo({
					url:"/pages/releaseNumber/index?id="+id
				})
			},
			previewImage(url){
				//预览图片
				uni.previewImage({
					urls: this.previewImages,
					current: url
				});
			},
			openInput() {
				this.inputShow = true;
				this.reply_id = 0
				this.reply_user_id = 0
				this.inputPlaceholder = '写下你评论吧'
			},
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				setTimeout(() => {
					this.inputShow = false
				}, 100);
				this.InputBottom = 0
			},
			async sendMsg() {
				this.showDP = false;//隐藏点赞弹层
				let comment = this.comment;
				this.plBody.comments = this.inputText;
				this.plBody.userId = this.userInfo.id;
				this.plBody.workId = comment.id;
				let result = await this.$apis.addWorkCircleComment(this.plBody);
				
				if(result.code == 200){
					this.getComment();
					uni.showToast({
						title:"评论成功"
					})
				}
			},
			showComment(item){
				this.showDP = false;//隐藏点赞弹层
				this.$delete(this.plBody,'buserId');
				this.inputPlaceholder = '写下你评论吧';
				this.inputText = '';
				this.comment = item;
				this.inputShow = !this.inputShow;
			},
			replyComment(item,pl){
				console.log(this.inputShow);
				this.showDP = false;//隐藏点赞弹层
				if(pl){
					 this.plBody.buserId = pl.userInfo.userId;
					this.inputPlaceholder = "回复"+pl.userName+":";
				}
				this.inputText = '';
				this.comment = item;
				this.inputShow = true;
			},
			//点赞人数组转换字符
			getDzList(list){
				var arr = [];
				for(var i in list){
					arr.push(list[i].userName);
				}
				return arr.join('、')
			},
			// 跳转到全部回复
			toAllReply() {
				uni.navigateTo({
					url: '/pages/template/comment/reply'
				});
			},
			// 点赞
			async getLike(id) {
				this.showDP = false;//隐藏点赞弹层
				let reqBody = {},userId = this.$store.state.userInfo.id;
				reqBody['userId'] = userId;
				reqBody['workId'] = id;
				let result = await this.$apis.addWorkCircleSupport(reqBody);
				if(result.code==200){
					this.getComment();
					uni.showToast({
						title:result.message
					})
				}
			},				
			open(){
				this.inputShow = false;
				this.showDP = !this.showDP;
				console.log(this.res);
			},
			// 评论列表
			async getComment() {
				let id = this.id;
				let result = await this.$apis.workCircleInfo({id:id});
				if(result.data.imgUrl.indexOf(',') == -1){
					result.data.list = [{
						image: this.baseUrl+result.data.imgUrl,
						title: ''
					}];
					this.previewImages = [this.baseUrl+result.data.imgUrl];
				}else{
					var list = [];
					var imgUrls = result.data.imgUrl.split(',');
					this.previewImages = imgUrls;
					for(var i in imgUrls){
						list.push({image:this.baseUrl+imgUrls[i],title: ''});
					}
					result.data.list = list;
				}
				console.log(result.data);
				this.res = result.data;
				console.log(this.res);
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.fiexd-head {
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top:88rpx;
		/* #endif */
		left: 0;
		z-index: 99;
		width: 100%;
		height: 82rpx;
	}

	.header {
		width: 750rpx;
		background: linear-gradient(0deg, #ac62ff, #df62ff);

	}

	.nav {
		width: 100%;
		padding: 15rpx 0 29rpx 0;
		box-sizing: border-box;
		overflow: hidden;
		font-size: 28rpx;
		white-space: nowrap;

		.nav-item {
			width: 20%;
			display: inline-block;
			text-align: center;
			color: #fff;

			&.active {
				color: #fff;
			}
		}
	}


	.comment {
		display: flex;
		padding: 30rpx;

		.left {
			image {
				width: 94rpx;
				height: 110rpx;


			}
		}

		.right {
			flex: 1;
			padding-left: 30rpx;
			font-size: 30rpx;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 10rpx;
				font-size: 32rpx;
				color: #6268F2;



				.name {
					color: #5677fc;
				}

				.like {
					display: flex;
					align-items: center;
					color: #9a9a9a;
					font-size: 26rpx;

					.num {
						margin-right: 4rpx;
						color: #9a9a9a;
					}
				}

				.highlight {
					color: #5677fc;

					.num {
						color: #5677fc;
					}
				}
			}

			.content {
				margin-bottom: 10rpx;
			}
			
			.tupian image {
				width: 261rpx;
				height: 160rpx;
				background: #0E1E36;
				border-radius: 10px;
				margin-right: 20rpx;
			}

			.reply-box {
				background: #F5F5F9;
				border-radius: 6rpx;

				.item {
					// padding: 20rpx;
					border-bottom: solid 2rpx #F5F5F9;

					.username {
						font-size: 24rpx;
						color: #999999;
					}
				}

				.all-reply {
					padding: 20rpx;
					display: flex;
					color: #5677fc;
					align-items: center;

					.more {
						margin-left: 6rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				font-size: 24rpx;
				color: #9a9a9a;
			}

			.pinglun image {
				width: 48rpx;
				height: 48rpx;
			}

			.zanpinglun {
				width: 241rpx;
				height: 60rpx;
				background: #6268F1;
				border-radius: 6rpx;

			}
		}
	}
	.border-bottom {
			border-bottom: 1px solid #303030;
		}
		
		.cu-card {
		
		
			height: 100vh;
			// 不知哪儿来的动画属性将卡片隐藏强制不让隐藏
			transform: scale(1) !important;
		}
			
		.input {
			background-color: #222;
		}
		
		.cosmos-scroll-view {
			height: 90vh;
		}
		
		.my-screen-swiper {
			bottom: 0;
			width: 100%;
			height: 100rpx;
			position: fixed;
			left: 0;
			white-space: nowrap;
			box-sizing: border-box;
			overflow: hidden;
			line-height: 100rpx;
			z-index: 999;
		}
		
	.cu-btn {
		position: relative;
		border: 0upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 30upx;
		font-size: 28upx;
		height: 64upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0upx, 0upx);
		margin-right: initial;
	}
	
	.cu-btn::after {
		display: none;
	}
	.cu-avatar {
			width: 40rpx;
			height:40rpx;
				margin: 0 20rpx;
				border-radius: 30rpx;
			}
	
	
	.foot {position: fixed;bottom: 0;z-index:10;display: flex;justify-content: space-between; align-items: center; background-color: #fff;width:100%;padding:15rpx;
		input {width:60%;height:30rpx;background-color: #F5F5F9;border-radius: 15rpx;font-size:20rpx;padding:10rpx;}
	}
		
		.none {
			display: none;
		}
</style>
